<!DOCTYPE html>
<html lang="zh-CN">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <link rel="stylesheet" href="/css/reset.css">
  <link rel="stylesheet" href="/css/normalize.css">
  <link rel='stylesheet' href='/css/pages/book-auth-spc.css' />
  <title>高考押题卷</title>
</head>

<body>
  <div class="gk-yc-wrapper">
    <div class="gk-yc-banner">
      <img src="/img/bookSpc/banner.jpg" alt="">
    </div>
    <div class="gk-yc-row">
      <h2 class="text-center gk-title">
        <%= book.title %>
      </h2>
      <p class="text-center gk-sub-title">
        <%= book.subject_name %>专用
      </p>
      <div id="verify-base">
        <div class="gk-yc-input">
          <input id="input-value" type="text" placeholder="请输入10位卡号">
          <button id="enter">确认</button>
        </div>
        <p class="text-center gk-detail-title">验证领增值资料</p>
        <div class="gk-detail-item">
          <img src="/img/bookSpc/2.png" /> 自测统评+个性化诊断报告</div>
        <div class="gk-detail-item">
          <img src="/img/bookSpc/2.png" /> 临考冲刺提分群VIP会员</div>
        <div class="gk-detail-item">
          <img src="/img/bookSpc/2.png" /> 高考命题预测与讲 — 临考押题分析课</div>
      </div>
      <div id="verify-success" style="display: none">
        <div class="text-center gk-yc-success">
          <img src="/img/bookSpc/1.png" alt=""> 恭喜您获得配套增值资料
        </div>
        <p class="text-center gk-detail-title">领取说明</p>
        <div class="gk-yc-intro">
          <div id="img" class="img"></div>
          <div class="gk-yc-intro-detail">
            <p>1.长按二维码进入“天利38套”公众号</p>
            <p>2.点击“图书增值”子菜单进入增值服务小程序领取</p>
          </div>
          <div style="clear: left"></div>
        </div>
        <% if(has_ex == "0") { %>
            <a class="text-center" id="enterRoom" href="https://jq.qq.com/?_wv=1027&k=5cUmfYj">
                <span class="btnVip"><img src="/img/bookSpc/3.png" alt=""> 快速进VIP群</span>
            </a>
        <% }%>
        <% if(has_ex == "1") { %>
            <a class="text-center" id="downloadEx" href="#">
                <span class="btnVip">下载电子版</span>
            </a>
        <% }%>
      </div>
      <div id="modal" style="display:none;">
        <div class="modal-bg">
        </div>
        <div class="modal">
            <div class="title">
                该图书为正版
            </div>
            <div class="detail line1" style="margin-bottom: 20px">
                恭喜您，该验证码首次验证成功
            </div>
            <div class="detail line2" style="margin-bottom: 20px">
            </div>
            <div class="btn-bar">
                <button style="display:none" class="ghost btn" onclick="reVerify()">重新验证</button>
                <button class="primary btn" onclick="reVerify()">知道了</button>
            </div>
        </div>
    </div>
    </div>
    <script src='https://sfile.tl100.com/js/libs/axios.min.js'></script>
    <script src='https://sfile.tl100.com/js/libs/qrcode.min.js'></script>
    <script src='https://sfile.tl100.com/js/libs/moment.min.js'></script>
    <script>
        'use strict'
        // DOM Objects
        var bookAuthSpc = {
            enter: document.getElementById('enter'),
            verifySucess: document.getElementById('verify-success'),
            verifyBase: document.getElementById('verify-base'),
            inputValue: document.getElementById('input-value'),
            modal: document.getElementById('modal'),
            enterRoom: document.getElementById('enterRoom'),
            downloadEx:document.getElementById('downloadEx')
        }
            // Dialog options
    // var modal = {
    //   title: bookAuthSpc.modal.getElementsByClassName("title")[0],
    //   detail: bookAuthSpc.modal.getElementsByClassName("detail")[0],
    //   ghost: bookAuthSpc.modal.getElementsByClassName("ghost")[0],
    //   primaryBtn: bookAuthSpc.modal.getElementsByClassName("primary")[0]
    // }

        function reVerify() {
            bookAuthSpc.inputValue.value = "";
            bookAuthSpc.modal.style.display = "none";
        }
        // Methods
        var methods = {
            showQrCode: function () {
                bookAuthSpc.verifySucess.style.display = 'block';
                bookAuthSpc.verifyBase.style.display = 'none';
            },
            showModal: function (data) {
                var modal = bookAuthSpc.modal;
                var title = modal.getElementsByClassName("title")[0];
                var that = this;
                title.innerText = data.title;
                if (data.titleColorType == 1) {
                    title.style.color = "#00A874";
                }

                modal.getElementsByClassName("line1")[0].innerText = data.line1;
                modal.getElementsByClassName("line2")[0].innerText = data.line2;

                if (data.is_success > 0) {
                    modal.getElementsByClassName("ghost")[0].style.display = "none";                    
                }else {
                    modal.getElementsByClassName("ghost")[0].style.display = "";                                        
                }
                var primaryBtn = modal.getElementsByClassName("primary")[0];
                primaryBtn.innerText = "知道了";
                primaryBtn.onclick = function () {
                    if (data.is_success == 1) {
                        that.showQrCode();
                    }
                    modal.style.display = 'none';
                    return false;
                };
                modal.style.display = "";
            },
            setVerifyBtnDisabled: function (disabled) {
                var btn = bookAuthSpc.enter;
                if (disabled) {
                    btn.innerText = "验证中...";
                    btn.disabled = true;
                } else {
                    btn.innerText = "验证";
                    btn.disabled = false;
                }
            },
            verify() {
                var inputData = bookAuthSpc.inputValue,
                    code = inputData.value.trim(),
                    that = this,
                    params = {}

                if (code.length == 0) {
                    alert('请输入防伪码!');
                    return;
                }
                if (code.length != 10) {
                    alert('请输入正确的防伪码!');
                    return;
                }

                that.setVerifyBtnDisabled(true);

                params.code = code.toUpperCase();
                params.book_id = '<%= book.bid%>';
                params.token = '<%= token%>';
                params.ip = '<%= ip%>';
                axios.post('https://api.tl100.com/bookex/api/v1.0/book_verify/getExByCode', params)
                    .then(function (response) {
                        that.setVerifyBtnDisabled(false);
                        var rs_data = response.data, data = {};
                        data.line1 = rs_data.msg;
                        data.line2 = "";
                        if (rs_data.res_code == 1) {
                            data.title = "该图书为正版";
                            data.titleColorType = "1";
                            data.is_success = 1;
                            that.getDonwloadUrl();
                        } else {
                            data.times = 0;
                            data.title = "图书验证失败";
                            data.titleColorType = "2";
                            data.is_success = 0;
                        }
                        that.showModal(data);
                    })
                    .catch(function (error) {
                        alert("验证超时！");
                        that.setVerifyBtnDisabled(false);
                    });
            },
            getUrlAddress() {
                axios.post('https://api.tl100.com/exam_signup/api/data_lobo/getPreBuyEnterGroupAddress')
                    .then(function (response) {
                        var rs_data = response.data
                        bookAuthSpc.enterRoom.href = rs_data.msg;
                    })
                    .catch(function (error) {
                    });
            },
            getDonwloadUrl(){
                var params = {};
                var data = {};
                var that = this;
                params.book_id = '<%= book.bid%>';
                params.token = '<%= token%>';
                axios.post('https://api.tl100.com/bookex/api/v1.0/book_verify/getEBookUrl',params)
                .then(function (response) {
                    var rs_data = response.data;
                    bookAuthSpc.downloadEx.addEventListener('click', function () {
                        data.is_success = 2;     
                        data.title = "提示信息";                                   
                        if (rs_data.res_code == 1) {
                            data.title = "提示信息";
                            data.titleColorType = "1";
                            data.line1 = "请长按复制下载地址到浏览器中下载，30分钟内有效！建议使用电脑下载，iphone手机请使用第三方浏览器。下载地址:";
                            data.line2  = rs_data.data;
                        } else {
                            data.title = "图书验证失败";
                            data.titleColorType = "2";
                            data.line1 = rs_data.msg;    
                            data.line2 = "";                    
                        }
                        that.showModal(data);
                    });
                })
                .catch(function (error) {
                    bookAuthSpc.downloadEx.addEventListener('click', function () {
                            alert("地址获取异常，请刷新后重试！");
                    });
                });
            }
        }
        window.onload = function () {
            methods.getUrlAddress();
            new QRCode(document.getElementById("img"), {
                text: '<%=qrcode_url%>',
                width: 100,
                height: 100,
                colorDark: "#000000",
                colorLight: "#ffffff",
                correctLevel: QRCode.CorrectLevel.L
            });
        };
        // Event Register
        bookAuthSpc.enter.addEventListener('click', function () {
            methods.verify();
        })
    </script>
</body>

</html>